<template>
	<view class="dashboard-page">
		<!-- 构建一个复杂的电商后台管理仪表盘
 设计思路：
 
 手机（竖屏 & 横屏，窄屏）: 优先展示核心数据卡片（今日订单、访客数）。所有复杂操作（如数据筛选、图表查看）都收起到一个抽屉菜单中。横屏时图表可以全屏查看。
 平板（中等屏幕，竖屏）: 左侧为可折叠的导航菜单，右侧为数据卡片和简版数据图表。
 平板（中等屏幕，横屏，且高度足够）: 左侧导航菜单默认展开，右侧展示更详细的数据图表和订单列表。
 桌面/大屏设备: 左侧固定导航栏，顶部为全局搜索和通知，主区域分为左右两块，左边是实时数据图表，右边是待办事项和最新订单流。
 特定展示屏（1920x1080）: 在公司的运营中心大屏幕上，自动进入一个专门为大屏设计的“数据作战室”模式，全屏展示核心KPI和动态图表。
 
 -->

		<!-- 场景1: 公司运营中心大屏的 "数据作战室" 模式 -->
		<match-media :width="1920" :height="1080">
			<view class="war-room-mode">
				<h1>数据作战室</h1>
				<!-- 全屏动态图表和KPI -->
			</view>
		</match-media>

		<!-- 场景2: 桌面端/大屏的复杂布局 (除了1920x1080的特定尺寸) -->
		<!-- 注意：为了避免与上一个规则冲突，我们需要排除它。在实际中可以通过更复杂的逻辑或CSS来实现，这里用嵌套来示意 -->
		<match-media :min-width="1280">
			<match-media :width="1920" :height="1080" :invert-match="true">
				<!-- 假设有invert-match属性，或通过JS逻辑判断 -->
				<view class="desktop-layout">
					<view class="fixed-sidebar">固定导航</view>
					<view class="main-wrapper">
						<view class="main-header">全局搜索与通知</view>
						<view class="content-area">
							<view class="data-charts">实时数据图表</view>
							<view class="todo-list">待办事项与订单流</view>
						</view>
					</view>
				</view>
			</match-media>
		</match-media>

		<!-- 场景3: 平板中屏布局 (768px - 1279px) -->
		<match-media :min-width="768" :max-width="1279">
			<!-- 子场景3.1: 平板横屏，且高度大于600px，提供最佳体验 -->
			<match-media :orientation="'landscape'" :min-height="600">
				<view class="tablet-layout-landscape">
					<view class="sidebar-expanded">展开的导航</view>
					<view class="content-detailed">详细图表和订单列表</view>
				</view>
			</match-media>
			<!-- 子场景3.2: 平板竖屏，或横屏但高度不足 -->
			<match-media :orientation="'portrait'">
				<view class="tablet-layout-portrait">
					<view class="sidebar-collapsible">可折叠导航</view>
					<view class="content-simple">数据卡片和简版图表</view>
				</view>
			</match-media>
		</match-media>

		<!-- 场景4: 手机小屏布局 (< 768px) -->
		<match-media :max-width="767">
			<view class="mobile-layout">
				<view class="header-with-drawer-btn">
					核心指标
					<button>打开菜单</button>
				</view>
				<view class="core-data-cards">今日订单、访客数...</view>

				<!-- 子场景4.1: 在极小高度屏幕(max-height)上，隐藏一些非核心卡片 -->
				<match-media :max-height="350">
					<view class="height-warning">屏幕空间不足，部分信息已收起</view>
				</match-media>
			</view>
		</match-media>
	</view>
</template>
<style scoped>
/* 省略样式，仅用于说明布局结构 */
.layout-desktop {
	display: flex;
}

.sidebar-left,
.sidebar-right {
	flex-shrink: 0;
	width: 200px;
}

.main-content {
	flex-grow: 1;
}

.layout-tablet {
	display: flex;
}

.bottom-toolbar-full,
.bottom-toolbar-mini {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	padding: 10px;
}

.immersive-tip {
	position: fixed;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 5px;
	border-radius: 5px;
}

.special-share-button {
	position: fixed;
	bottom: 80px;
	right: 20px;
	background: gold;
	padding: 10px;
	border-radius: 50%;
}
</style>
